<template>
    <div>
        <el-dialog :title="operateType" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label="类目选择" prop="category">
                    <el-button type="primary" @click="innerVisible=true">类目选择</el-button>
                    <span class="categoryShow">{{ruleForm.category}}</span>
                </el-form-item>

                <el-form-item label="商品名称" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>

                <el-form-item label="商品价格" prop="price">
                    <el-input v-model="ruleForm.price"></el-input>
                </el-form-item>

                <el-form-item label="商品数量" prop="num">
                    <el-input v-model="ruleForm.num"></el-input>
                </el-form-item>

                <el-form-item label="发布时间" prop="date">
                    <el-col :span="11">
                        <el-date-picker type="date"  placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;">
                        </el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="ruleForm.time" style="width: 100%;">
                        </el-time-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="商品卖点" prop="sellPoint">
                    <el-input v-model="ruleForm.sellPoint"></el-input>
                </el-form-item>

                <el-form-item label="商品图片" prop="image">
                    <el-button type="primary" @click="innerVisibleImg=true" style="display: table-cell">图片上传</el-button>
                    <img :src="ruleForm.image" height="200px" style="margin-top: 10px;" alt="">
                </el-form-item>

                <el-form-item label="商品描述" prop="descs">
                    <WangEditor @sendContent="sendContent" ref="myEditor"></WangEditor>
                </el-form-item>

                <!-- <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item> -->
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>

            <!-- 内弹框1 类目选择 -->
            <el-dialog width="40%" title="类目选择" :visible.sync="innerVisible" append-to-body>
                <TreeGoods @sendTreeData="sendTreeData"></TreeGoods>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible=false">取 消</el-button>
                    <el-button type="primary" @click="showTreeData">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 内弹框2 上传图片 -->
            <el-dialog width="40%" title="上传图片" :visible.sync="innerVisibleImg" append-to-body>
                <UploadImg @sendImg="sendImg"></UploadImg>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm">取 消</el-button>
                    <el-button type="primary" @click="showImg">确 定</el-button>
                </span>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
import TreeGoods from './TreeGoods.vue'
import UploadImg from './UploadImg.vue'
import WangEditor from './WangEditor.vue'
export default {
    components: { TreeGoods, UploadImg, WangEditor },
    props: ['dialogVisible', 'operateType', 'rowData'],
    data() {
        return {
            innerVisible: false,
            innerVisibleImg: false,
            imgUrl: '',  // 存放上传图片地址
            // dialogVisible: false,
            treeData: {},
            ruleForm: {
                title: '',
                cid: '',
                price: '',
                num: '',
                sellPoint: '',
                image: '',
                descs: '',
                date: '',
                time: '',
                category: '',
            },
            rules: {
                title: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' }
                ],
                num: [
                    { required: true, message: '请输入商品数量', trigger: 'blur' }
                ],
            }
        };
    },
    watch: {
        rowData(val){
            this.ruleForm = val
            this.$nextTick(() => {
                this.$refs.myEditor.editor.txt.html(val.descs)
            })
            // this.$refs.myEditor.editor.
        }
    },
    methods: {
        handleClose() {
            this.$emit('changeDialog')
            this.resetForm("ruleForm")
            // this.$confirm('确认关闭？')
            //     .then(_ => {
            //         // done();
            //         this.$emit('changeDialog')
            //     })
            //     .catch(_ => { });
        },
        close() {
            this.$emit('changeDialog')
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // console.log('输入的信息', this.ruleForm)
                    const url = this.operateType == '添加商品' ? '/goods/add' : `/goods/edit/${this.ruleForm.id}`
                    // console.log(url)
                    this.$axios.post(url, this.ruleForm)
                    .then(res => {
                        // console.log(res.data)
                        if (res.status === 200){
                            // this.$emit('changeDialog')
                            this.$parent.getList()
                            this.$message({
                                type: 'success',
                                message: '成功'
                            })
                            // 清空表单
                            // this.$refs[formName].resetFields();
                            // this.$refs.myEditor.editor.txt.clear()
                            this.resetForm(formName)
                        }
                    })
                    
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        // 清空表单
        resetForm(formName) {
            this.$emit('changeDialog')
            this.$refs[formName].resetFields();
            this.$refs.myEditor.editor.txt.clear()
        },

        sendTreeData(val) {
            // console.log(val)
            this.treeData = val
        },
        showTreeData() {
            this.innerVisible = false
            this.ruleForm.category = this.treeData.name
            this.ruleForm.cid = this.treeData.cid
            // console.log('Success')
        },

        // 显示上传的图片
        sendImg(val) {
            // console.log(val)
            this.imgUrl = val
        },

        showImg() {
            this.innerVisibleImg = false
            this.ruleForm.image = this.imgUrl
        },

        // 富文本内容
        sendContent(val){
            this.ruleForm.descs = val
        }
    }
}
</script>

<style lang="less" scoped>
.line {
    text-align: center
}

.categoryShow {
    margin-left: 10px;
}
</style>